<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('用户列表')">
	<meta charset="UTF-8"/>
	<style type="text/css">
	td, th {
		display: block;
	}
	</style>
</head>
<body style="background-color: #FFF;">
<div id="mainDiv" style="font-family: '宋体'; margin: 5px;">
<ol class="breadcrumb" style="padding-bottom: 0px;">
  <li><a href="javascript:;">基础信息</a></li>
  <li class="active">用户列表</li>
</ol>
<div style="width: 100%; height: 40px;">
	<div>
		<div style="float: left; padding-top: 5px;"><font style="font-size: 14px;">姓名：</font></div>
		<div style="float: left;"><input type="text" class="form-control" v-model="paramJson.name" /></div>
		<div style="float: left; margin-left: 8px;"><button class="btn" @click="searchList"><i class="icon icon-search"></i> 查询</button></div>
		<div style="float: left; margin-left: 8px;"><button class="btn" @click="searchList"><i class="icon icon-refresh"></i> 刷新</button></div>
		
		<!-- 操作按钮 -->
		<div style="width: 100%; float: left; margin-top: 10px;">
			<button class="btn btn-primary" @click="add"><i class="icon icon-plus"></i> 新增</button>
			<button class="btn btn-danger" @click="del"><i class="icon icon-trash"></i> 删除</button>
		</div>
		
	</div>
</div>
<div style="margin-top: 10px;">
	<table class="table table-bordered table-hover" style="width: 100%; min-width: 1000px; text-align: center;">
	<thead>
		<tr>
			<th></th>
			<th>序号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>密码</th>
			<th>创建时间</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<tr v-for="(data, index) in modelList" @click="checkedSelect(data.id)">
			<td><input type="checkbox" :value="data.id" v-model="checkedValArr"/></td>
			<td>{{index + 1}}</td>
			<td>{{data.name}}</td>
			<td>{{data.sex == 0 ? '女' : '男'}}</td>
			<td>{{data.pwd}}</td>
			<td>{{moment(data.createDate).format("YYYY-MM-DD HH:mm:ss")}}</td>
			<td>
				<span class="label label-warning" style="font-size: 12px; cursor: pointer; margin-left: 5px;" @click="edit(data.id)">编辑</span>
				<span class="label label-info" style="font-size: 12px; cursor: pointer; margin-left: 5px;" @click="detail(data.id)">详情</span>
			</td>
		</tr>
		<tr v-show="modelList == null || modelList.length == 0">
			<td colspan="8">暂无数据</td>
		</tr>
	</tbody>
	</table>
	<!-- 分页start -->	
	<table width="100%">
		<tr>
			<td width="50%">
				<div class="pagin" style="margin-top: 0px !important;">
					<div style="font-size: 14px; font-family: Helvetica Neue,Helvetica,Arial,sans-serif">共&nbsp;<i style="color: blue;" class="htmlTotalElements">{{paginationJson.total}}</i>&nbsp;条记录，当前第&nbsp;<i style="color: blue;"class="htmlPageNumber" >{{paginationJson.number + 1}}</i>&nbsp;页
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;每页数据:<select class="selectPageSize" v-model="paginationJson.size" @change="paginationSize">
							<option value="10">10</option>
							<option value="20">20</option>
							<option value="50">50</option>
							<option value="200">200</option>
							<option value="1000">1000</option>
						</select>
					</div>
				</div>
			</td>
			<td>	
				<div id="Pagination" class="pagination" style="float:right;margin-right:20px;"></div>
			</td> 
		</tr>
	</table>
	<!-- 分页end -->
</div>
</div>
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</body>
<script type="text/javascript">
const BASE_PATH = [[@{/}]];
const URLS = {
	APIS: {
		LIST: BASE_PATH+'/restful/adminUser/list',
		DEL: BASE_PATH+'/restful/adminUser/delete'
		
	},
	PAGES: {
		ADD: BASE_PATH+'/web/adminUser/add'
	}
};
var reqLayerIndex = -1;
axios.interceptors.request.use(function (config) {
	reqLayerIndex = layer.load();
	return config;
}, function (error) {
	return Promise.reject(error);
});
axios.interceptors.response.use(function(response) {
	layer.close(reqLayerIndex);
	return response;
}, function (error) {
	return Promise.reject(error.response);
});
var app = new Vue({
	el: '#mainDiv',
	data: {
		modelList: [],
		paramJson: {
			name: ''
		},
		paginationJson: {
			total: 0,
			number: 0,
			size: 10
		},
		checkedValArr: []
	},
	methods: {
		init: function() {
			let _this = this;
			let reqParam = _this.paginationJson;
			reqParam.entity = _this.paramJson;
			axios.post(URLS.APIS.LIST, reqParam)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					data = data.data;
					console.log(data);
					for (let i = 0, len = data.length; i < len; i++) {
						data[i].checked = false;
					}
					_this.modelList = data.content;
					_this.$set(_this.paginationJson, 'total', data.total);
					_this.$set(_this.paginationJson, 'number', data.number);
					_this.$set(_this.paginationJson, 'size', data.size);
					_this.pagination();
				}
			}).catch(function (error) {
			});
		},
		searchList: function() {
			app.$set(app.paginationJson, 'number', 0);
			app.init();
		},
		checkedSelect: function(id) {
			/*
			* 判断id是否在数组中, 如果在，则删除；不在，则添加
			*/
			let inArr = false;
			for (let i = 0, len = app.checkedValArr.length; i < len; i++) {
				if (app.checkedValArr[i] == id) {
					inArr = true;
					app.checkedValArr.splice(i, 1);
				}
			}
			if (!inArr) {
				app.checkedValArr.push(id);
			}
		},
		paginationSize: function() {
			this.$set(this.paginationJson, 'number', 0);
			this.pagination();
		},
		pagination: function() {
			$("#Pagination").pagination(this.paginationJson.total, {
				"num_edge_entries" : 2,
				"num_display_entries" : 5,
				"callback" : this.pageselectCallback,
				"current_page" : this.paginationJson.number,
				"items_per_page" : this.paginationJson.size
			});
		},
		pageselectCallback: function(number) {
			this.$set(this.paginationJson, 'number', number);
			app.init();
		},
		del: function() {
			if (app.checkedValArr.length == 0) {
				layer.alert('没有选中需要删除的元素!');
				return;
			}
			let modelIds = app.checkedValArr.join(',');
			layer.confirm('确定要删除选中的数据吗？', {
				btn: ['删除','不删除'] //按钮
			}, function(index) {
				axios.get(URLS.APIS.DEL+'?ids='+modelIds)
				.then(function (res) {
					data = res.data;
					if (data.code == 200) {
						layer.alert('删除成功', function(i) {
							app.init();
							layer.close(index);
							layer.close(i);
						});
					}
				}).catch(function (error) {
				});
			});
		},
		add: function() {
			layer.open({
				type: 2,
				title: '新增用户',
				shadeClose: false,
				area: ['90%', '90%'],
				shade: 0.2,
				maxmin: true,
				content: URLS.PAGES.ADD,
				end: function() {
					app.init();
				}
			});
		},
		detail: function(id) {
			
		},
		edit: function(id) {
			layer.open({
				type: 2,
				title: '编辑用户',
				shadeClose: false,
				area: ['90%', '90%'],
				shade: 0.2,
				maxmin: true,
				content: URLS.PAGES.ADD+'?id='+id,
				end: function() {
					app.init();
				}
			});
		}
	},
	mounted: function() {
		this.init();
	}
});
</script>
</html>